<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/@antv/g6/dist/g6.min.js"></script>
    <script src="./node_modules/@antv/g6/dist/g6Layout.worker.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="container"></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: () => {
          return {
            datas: {},
          };
        },
        methods: {
          // 获取json数据
          async getData() {
            let { data } = await axios.get("./data.json");
            this.datas = data;
            this.InitGraph();
          },
          //   初始化graph 并导入数据和渲染
          InitGraph() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const descriptionDiv = document.createElement("div");
            descriptionDiv.innerHTML = "";
            container.appendChild(descriptionDiv);
            const graph = new G6.TreeGraph({
              container: "container",
              width,
              height,
              modes: {
                default: [
                  {
                    type: "collapse-expand",
                    onChange: function onChange(item, collapsed) {
                      const data = item.get("model").data;
                      data.collapsed = collapsed;
                      return true;
                    },
                  },
                  "drag-canvas",
                  "zoom-canvas",
                ],
              },
              defaultNode: {
                size: 26,
                anchorPoints: [
                  [0, 0.5],
                  [1, 0.5],
                ],
                style: {
                  fill: "#C6E5FF",
                  stroke: "#5B8FF9",
                },
              },
              defaultEdge: {
                type: "cubic-horizontal",
                style: {
                  stroke: "#A3B1BF",
                },
              },
              layout: {
                type: "mindmap",
                direction: "H",
                getHeight: () => {
                  return 16;
                },
                getWidth: () => {
                  return 16;
                },
                getVGap: () => {
                  return 10;
                },
                getHGap: () => {
                  return 50;
                },
              },
            });

            let centerX = 0;
            let dx;
            let dy;
            graph.node(function (node) {
              if (node.id === "Modeling Methods") {
                centerX = node.x;
              }

              return {
                label: node.id,
                labelCfg: {
                  position:
                    node.children && node.children.length > 0
                      ? "left"
                      : node.x > centerX
                      ? "right"
                      : "left",
                  offset: 5,
                },
              };
            });

            graph.data(this.datas);
            graph.render();
            graph.fitView();
            // 定义节点点击事件
            graph.on("node:click", (ev) => {
              console.log(ev, "节点点击事件");
            });
            // 定义节点鼠标移入事件
            graph.on("node:mousedown", (ev) => {
              let { item } = ev;
              item._cfg.styles.cursor = "move";
              console.log(item, 667788);
              console.log(ev, "定义节点鼠标移入事件");
              graph.on("node:dragstart", (ev) => {
                let { item } = ev;
                let model = item.getModel();
                dx = model.x - ev.x;
                dy = model.y - ev.y;
              });
              graph.on("node:drag", (ev) => {
                // console.log(ev.target);
                // console.log(ev);
                //   console.log(ev.canvasX, ev.canvasY, "拖拽节点更新");
              });
              // 拖拽结束并更新位置信息
              graph.on("node:dragend", (ev) => {
                let { item } = ev;
                let model = item.getModel();
                model.x = ev.canvasX;
                model.y = ev.canvasY;
                console.log(model, 778899);
                // graph.update(item,model)
                // item.update(model)
                console.log({ x: ev.canvasX, y: ev.canvasY });
                // setTimeout(()=>{
                //      item.updatePosition({x:ev.canvasX,y:ev.canvasY})
                // })
                graph.update(item, { x: ev.x + dx, y: ev.y + dy });
                //    model.x=ev.canvasX
                //   model.y=ev.canvasY
                //   item.update(model)
                // model.x=ev.canvasX
                // model.y=ev.canvasY
                // console.log(model);
                //   item.updatePosition(ev.canvasX,ev.canvasY)
              });
            });
            // 定义节点鼠标移出节点时触发
            graph.on("node:mouseout", (ev) => {
              let { item } = ev;
              item._cfg.styles.cursor = "point";
              console.log(item, 667788);
              console.log(ev, "鼠标移出节点时触发");
            });
            // // node:drag 开始拖拽

            // 监听鼠标单击的点击事件
            // graph.on('click',ev=>{
            //     // console.log(ev);
            // })
            // // 鼠标进入元素的时候的事件
            // graph.on('mouseenter',ev=>{
            //     // console.log(ev);
            // })
            // // 鼠标移除的时候的事件
            // graph.on('mouseout',ev=>{
            //     // console.log(ev);
            // })
            // 键盘按下的事件
            graph.on("keydown", (ev) => {
              console.log(ev, "键盘按下事件");
            });
            // 键盘弹起的事件
            graph.on("keyup", (ev) => {
              console.log(ev, "键盘弹起事件");
            });
            // 对画布进行拖拽事件的监听
            graph.on("canvas:drag", (ev) => {
              console.log(ev, "当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上");
            });
            graph.on("canvas:dragend", (ev) => {
              console.log(ev, "当拖拽完成后触发的事件，此事件作用在被拖曳画布上");
            });
            graph.on("canvas:dragenter", (ev) => {
              console.log(ev, "当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标元素上");
            });
            graph.on("canvas:dragleave", (ev) => {
              console.log(ev, "当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标元素上");
            });
          },
        },
        mounted() {
          this.getData();
        },
      });
    </script>
  </body>
</html>
